var rowData;
var date1;
var coursename1;
var classname1;
var loginContainer = document.querySelector('.loginContainer');
var loginContent = document.querySelector('.loginContent');
var close = document.querySelector('.close');
$(function () {
    //给详情页面合适的宽度 2018-01-10
    var containerLength=$('#container-Length').width()
    console.log(containerLength)
    $('#getWidth').width(containerLength)
    //给详情页面合适的宽度 2018-01-10
    $("#exportExcel").attr('href',baseURL+'ClassAttendenceInfo/export?token='+token);
    $("#jqGrid").jqGrid({
        url: baseURL + 'ClassAttendenceInfo/Select',
        datatype: "json",
        colModel: [
            { label: '日期', name: 'date', width: 40, sortable:false },
            // { label: '学年', name: 'courseAcademicYear',index:'course_academic_year', width: 40 },
            // { label: '学期', name: 'courseAcademicTerm',index:'course_academic_term', width: 40 },
            // { label: '教学周', name: 'courseWhichWeek',index:'course_which_week', width: 40 },
            // { label: '星期', name: 'courseWhichDay',index:'course_which_day', width: 40 },
            { label: '班级名称', name: 'classname', width: 40, sortable:false },
            {label: '专业', name: 'profession', width: 30, sortable:false},
            { label: '学院', name: 'department', width: 40, sortable:false },
            { label: '节次', name: 'courseWhichIndex',index:'course_which_index', width: 25, sortable:false },
            { label: '课程名称', name: 'course', width: 40 , sortable:false},
            { label: '授课老师', name: 'courseTeacherName', width: 40, sortable:false },
            { label: 'ID', name: 'id', width: 40 ,hidden:true,key:true, sortable:false},
            { label: '应到', name: 'total', width: 20, sortable:false },
            { label: '实到', name: 'chuqin', width: 20, sortable:false },
            { label: '旷课', name: 'kuangke', width: 20, sortable:false },
            { label: '请假', name: 'qingjia', width: 20, sortable:false },
            { label: '迟到', name: 'chidao', width: 20, sortable:false },
             { label: '早退', name: 'zaotui', width: 20, sortable:false },
            { label: '提交人', name: 'username', width: 30, sortable:false },
            { label: '操作', name: '', width: 30, sortable: false, formatter: function(value, options, row){

                var r='<a class="table-btn1 detail-btn" onclick="getDetails(\''+row.date+'\',\'\',\''+row.course+'\',\''+row.classname+'\')">&nbsp;详情</a>'

                return r;
            }}


        ],
        viewrecords: true,
        height:'100%',
        rowNum: 10,
        rowList : [10,30,50],
        // rownumbers: true,
        // rownumWidth: 25,
        autowidth:true,
        multiselect: false,
        pager: "#jqGridPager",
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames : {
            page:"page",
            rows:"limit",
            order: "order"
        },
        gridComplete:function(){
            //隐藏grid底部滚动条
            // $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "scroll" });
        }
        ,
        ondblClickRow:function(rowid){
            var rowData = $("#jqGrid").jqGrid('getRowData',rowid);
            var rowName =$("#jqGrid").jqGrid('getGridParam','colNames');
            var s="";
            var i=2;
            for(var key in rowData){
                s=s+rowName[i++]+':'+rowData[key]+'<br> ';
            }
            // alert(s);
        }
    });
    $("#jqGridDetails").jqGrid({
        url: baseURL + 'ClassAttendenceInfo/selectAttendenceDetails',
        datatype: "local",
        colModel: [
            {label: '日期', name: 'date', key: true},
            {label: '学院', name: 'department'},
            {label: '班级', name: 'classname'},
            {label: '课程', name: 'course'},
             {label: '学号', name: 'studentid'},
            {label: '姓名', name: 'studentname'},
            {label: '考勤状态', name: 'state',formatter: function(value, options, row){
                if( value == '出勤')
                    return '<span class="table-btn1 table-success">出勤</span>';
                if( value == '迟到')
                    return '<span class="table-btn1 table-late">迟到</span>';
                if( value == '早退')
                    return '<span class="table-btn1 table-early">早退</span>';
                if( value == '旷课')
                    return '<span class="table-btn1 table-absenteeism">旷课</span>';
                if( value == '请假')
                    return '<a class="table-btn1 table-leave" href="'+row.imagePath+'" target="_Blank">请假</a>';

            }}

        ],
        viewrecords: true,
        height:'100%',
        rowNum: 10,
        rowList: [10, 30, 50],
        // rownumbers: true,
        // rownumWidth: 25,
        autowidth: true,
        multiselect: false,
        pager: "#jqGridDetailsPager",
        jsonReader: {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames: {
            page: "page",
            rows: "limit",
            order: "order"
        },
        gridComplete: function () {
            //隐藏grid底部滚动条
            $("#jqGridDetails").closest(".ui-jqgrid-bdiv").css({"overflow-x": "scroll"});
        },
    });
    $.ajax({
        url: baseURL + "/college/getAllcollege",
        data: {},
        success: function (r) {
            $("#College").append("<option value=''>请选择学院</option>");
            for (i = 0; i < r.list.length; i++) {
                var tname = r.list[i].collegeName;
                var tid = r.list[i].collegeName;
                $("#College").append("<option value='" + tid + "'>" + tname + "</option>");
            }
        }
    });
    $("#College").change(function () {
        $("#Class").empty();
        var college=$("#College").val();
        $.ajax({
            url: baseURL + "/college/getClassByCollege",
            data: {
                college:college
            },
            success: function (r) {
                $("#Class").append("<option value=''>请选择班级</option>");
                for (i = 0; i < r.list.length; i++) {
                    var tname = r.list[i];
                    var tid = r.list[i];
                    $("#Class").append("<option value='" + tid + "'>" + tname + "</option>");
                }
            }
        });
        $("#Profession").empty();
        var college=$("#College").val();
        $.ajax({
            url: baseURL + "/college/getProfessionByCollege",
            data: {
                college:college
            },
            success: function (r) {
                $("#Profession").append("<option value=''>请选择专业</option>");
                for (i = 0; i < r.list.length; i++) {
                    var tname = r.list[i];
                    var tid = r.list[i];
                    $("#Profession").append("<option value='" + tid + "'>" + tname + "</option>");
                }
            }
        });
    });
    $("#Profession").change(function () {
        $("#Class").empty();
        var college=$("#College").val();
        var profession=$("#Profession").val();
        $.ajax({
            url: baseURL + "/college/getClassByCollege",
            data: {
                college:college,
                profession:profession
            },
            success: function (r) {
                $("#Class").append("<option value=''>请选择班级</option>");
                for (i = 0; i < r.list.length; i++) {
                    var tname = r.list[i];
                    var tid = r.list[i];
                    $("#Class").append("<option value='" + tid + "'>" + tname + "</option>");
                }
            }
        });
    });
    $("#State").change(function () {
        $("#jqGridDetails").jqGrid('setGridParam',{
            datatype: 'json',
            postData:{
                "date":date1,
                "state":$("#State").val(),
                "coursename":coursename1,
                "classname":classname1
            }
        }).trigger('reloadGrid');
        var href=baseURL + 'ClassAttendenceInfo/exportDetails?token='+token;
        href+="&date="+date+"&state="+state+"&coursename="+coursename+"&classname="+classname;
        $("#exportDetailsExcel").attr('href',href);
        $("#jqGridDetails").focus();
    });
});
function setDate(id) {
    var Nowdate=new Date();
    M=Number(Nowdate.getMonth())+1;
    var today=Nowdate.getFullYear()+"-"+fix(M)+"-"+fix(Nowdate.getDate());
   if(id=='1'){
       $("#startDate").val(today);
       $("#endDate").val(today);
   }else if(id=='2'){
        $("#startDate").val(showWeekFirstDay());
        $("#endDate").val(today);
    }if(id=='3'){
        $("#startDate").val(showMonthFirstDay());
        $("#endDate").val(today);
    }
    vm.reload();
}
function showWeekFirstDay()
{
    var Nowdate=new Date();
    var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);
    M=Number(WeekFirstDay.getMonth())+1
    return WeekFirstDay.getFullYear()+"-"+fix(M)+"-"+fix(WeekFirstDay.getDate());
}
function showWeekLastDay()
{
    var Nowdate=new Date();
    var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);
    var WeekLastDay=new Date((WeekFirstDay/1000+6*86400)*1000);
    M=Number(WeekLastDay.getMonth())+1
    return WeekLastDay.getFullYear()+"-"+M+"-"+WeekLastDay.getDate();
}
function showMonthFirstDay()
{
    var Nowdate=new Date();
    var MonthFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth(),1);
    M=Number(MonthFirstDay.getMonth())+1
    return MonthFirstDay.getFullYear()+"-"+fix(M)+"-"+fix(MonthFirstDay.getDate());
}
function fix(num){
    if(num<10)
        return "0"+num;
    else return ""+num;
}
function showMonthLastDay()
{
    var Nowdate=new Date();
    var MonthNextFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth()+1,1);
    var MonthLastDay=new Date(MonthNextFirstDay-86400000);
    M=Number(MonthLastDay.getMonth())+1
    return MonthLastDay.getFullYear()+"-"+M+"-"+MonthLastDay.getDate();
}
function changeOption(data){
    $("State").val('');
    $("#jqGridDetails").jqGrid('setGridParam',{
        datatype: 'json',
        postData:{
            "date":rowData['date'],
            "state":data,
            "coursename":rowData['course'],
            "classname":rowData['classname']
        }
    }).trigger('reloadGrid');
    var href=baseURL + 'ClassAttendenceInfo/exportDetails?token='+token;
    href+="&date="+rowData['date']+"&state="+data+"&coursename="+rowData['course']+"&classname="+rowData['classname'];
    $("#exportDetailsExcel").attr('href',href);
    $("#jqGridDetails").focus();
} ;
// loginContainer.onclick = function () {
//     this.classList.remove('loginAfter');
//     document.body.style.overflow = 'auto';
//
// };
// // 右上角的关闭
// close.onclick = function () {
//     loginContainer.classList.remove('loginAfter');
//     document.body.style.overflow = 'auto';
// };
function  getDetails(date,state,coursename,classname) {
    vm.showList = false;
    date1=date;
    coursename1=coursename;
    classname1=classname;
    $("#jqGridDetails").jqGrid('setGridParam',{
        datatype: 'json',
        postData:{
            "date":date,
            "state":state,
            "coursename":coursename,
            "classname":classname
        }
    }).trigger('reloadGrid');
    var href=baseURL + 'ClassAttendenceInfo/exportDetails?token='+token;
    href+="&date="+date+"&state="+state+"&coursename="+coursename+"&classname="+classname;
    $("#exportDetailsExcel").attr('href',href);
    $("#jqGridDetails").focus();
}
// 点击白色区域不会关闭萌态框
// loginContent.onclick = function (e) {
//     e.stopPropagation()
// };
$("#test").onclick=function () {
    alert("success");
}
var vm = new Vue({
    el:'#rrapp',
    data:{
        q:{
            key: null
        },
        showList: true,
        title: null,
        StudentAttendenceInfo: {},
        date: null
    },
    methods: {
        query: function () {
            var startDate=$("#startDate").val();
            var endDate=$("#endDate").val();
            var college=$("#College").val();
            var profession=$("#Profession").val();
            var class1=$("#Class").val();
            var href=baseURL+'ClassAttendenceInfo/export?token='+token+
                "&startDate="+startDate+
                "&endDate="+ endDate+
                "&college="+college+
                "&profession="+profession+
                "&class="+class1;
            $("#exportExcel").attr('href',href);
            vm.reload();
        },
        reload: function () {
            vm.showList = true;
            var page = $("#jqGrid").jqGrid('getGridParam','page');
            $("#jqGrid").jqGrid('setGridParam',{
                postData: {
                    'department': vm.q.key,
                    'startDate': $("#startDate").val(),
                    'endDate': $("#endDate").val(),
                    'college': $("#College").val(),
                    'profession':$("#Profession").val(),
                    'class': $("#Class").val()
                },
                page:page
            }).trigger("reloadGrid");
        },
        }
});